---
image: /generated/articles-docs-video-tags.png
id: video-tags
title: Comparison of video tags
crumb: '<Video>, <Html5Video>, <OffthreadVideo>'
---

We offer three components for embedding videos into your Remotion composition:

- [`<OffthreadVideo />`](/docs/offthreadvideo) - **our recommendation**, based on a Rust-based frame extractor
- [`<Html5Video />`](/docs/html5-video) from [`remotion`](/docs/remotion) (previously named `<Video>`) - based on the HTML5 `<video>` element
- [`<Video />`](/docs/media/video) from [`@remotion/media`](/docs/media) - an experimental WebCodecs-based component, set to become the default

This page offers a comparison to help you decide which tag to use.

|                                          | [`<OffthreadVideo />`](/docs/offthreadvideo)                                                     | [`<Html5Video />`](/docs/html5-video) <br/> [`<Html5Audio />`](/docs/html5-audio) <br/> (`remotion`) | [`<Video />`](/docs/media/video) <br/> [`<Audio />`](/docs/media/audio) (`@remotion/media`)                                                   |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **Based on**                             | Rust + FFmpeg binary                                                                             | HTML5 `<video>` tag                                                                                  | Mediabunny, WebCodecs                                                                                                                         |
| **Frame-perfect**                        | ✅                                                                                               | ❌ Not guaranteed                                                                                    | ✅                                                                                                                                            |
| **Partial download of asset**            | ❌                                                                                               | Only with `muted` prop                                                                               | ✅                                                                                                                                            |
| **Preview**                              | HTML5 `<video>`                                                                                  | HTML5 `<video>`                                                                                      | WebCodecs                                                                                                                                     |
| **Render Speed**                         | Fast                                                                                             | Medium                                                                                               | <span style={{color: 'green', fontWeight: 'bold'}}> Fastest </span>                                                                           |
| **Supported containers**                 | `.aac`, `.avi`, `.caf`, `.flac`, `.flv`, `.m4a`, `.mkv`, `.mp3`, `.mp4`, `.ogg`, `.wav`, `.webm` | `.aac`, `.flac`, `.m4a`, `.mkv`, `.mp3`, `.mp4`, `.ogg`, `.wav`, `.webm`                             | `.aac`, `.flac`, `.mkv`, `.mov`, `.mp3`, `.mp4`, `.ogg`, `.wav`, `.webm` <br/><br/> Fallback to `<OffthreadVideo>` for unsupported containers |
| **Supported codecs**                     | AAC, AC3, AV1, FLAC, H.264, H.265, M4A, MP3, Opus, PCM, ProRes, VP8, VP9, Vorbis                 | AAC, FLAC, H.264, MP3, Opus, VP8, VP9, Vorbis                                                        | AAC, FLAC, H.264, MP3, Opus, VP8, VP9, Vorbis <br/><br/> Fallback to `<OffthreadVideo>` for unsupported codecs                                |
| **HLS Support**                          | No                                                                                               | [Only during preview](/docs/miscellaneous/snippets/hls)                                              | Planned                                                                                                                                       |
| **CORS required**                        | No                                                                                               | No                                                                                                   | Yes                                                                                                                                           |
| **Loopable**                             | ❌                                                                                               | ✅                                                                                                   | ✅                                                                                                                                            |
| **`playbackRate`** <br/> (Speed Change)  | ✅                                                                                               | ✅                                                                                                   | ✅                                                                                                                                            |
| **`toneFrequency`** <br/> (Pitch Change) | Only during rendering                                                                            | Only during rendering                                                                                | Only during rendering                                                                                                                         |

## Using a different tag in preview and rendering

Use the [`useRemotionEnvironment()`](/docs/use-remotion-environment) hook to render a different component in preview and rendering.

```tsx twoslash title="OffthreadVideo during preview, @remotion/media during rendering"
import {useRemotionEnvironment, OffthreadVideo, RemotionOffthreadVideoProps} from 'remotion';
import {Video, VideoProps} from '@remotion/media';

const OffthreadWhileRenderingRefForwardingFunction: React.FC<{
  offthreadVideoProps: RemotionOffthreadVideoProps;
  videoProps: VideoProps;
}> = ({offthreadVideoProps, videoProps}) => {
  const env = useRemotionEnvironment();

  if (!env.isRendering) {
    return <OffthreadVideo {...offthreadVideoProps} />;
  }

  return <Video {...videoProps} />;
};
```
